<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>点餐页面</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/overall.css">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/common/Request.js"></script>
    <script src="js/common/Utils.js"></script>
</head>
<body style="padding-bottom: 80px">
<div>
    <div class="col-center-block col-lg-6">
        <div>
            <div class="page-header">
                <h1> 点餐
                    <small id="order_lunch_info_sum">当前点餐人数: 0</small>
                </h1>
            </div>
            <div>
                <button id="order_lunch_btn_order_add" type="button" class="btn btn-success">点餐 +1</button>

                <button id="order_lunch_btn_order_remove" type="button" class="btn btn-warning">点餐 -1</button>

                <button id="order_lunch_btn_refresh" type="button" class="btn btn-info">刷新</button>

                <button id="order_lunch_btn_clear" type="button" class="btn btn-danger">清空(谨慎使用)</button>
            </div>
        </div>
        <br>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="order_lunch_modal_increase"
             tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="display: none">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">参加</h3>
                    </div>
                    <div class="modal-body">
                        <div role="form">
                            <div>
                                <label class="col-lg-2">你的名称: </label> <input
                                    id="order_lunch_modal_increase_txt_name"
                                    class="form-control" placeholder="请输入名称" type="text">
                            </div>
                            <br>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button
                                id="order_lunch_modal_increase_submit"
                                type="button" class="btn btn-primary">确认
                        </button>
                        <button
                                id="order_lunch_modal_increase_submit_cancel"
                                type="button" class="btn btn-default" data-dismiss="modal">取消
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="order_lunch_modal_decrease"
             tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="display: none">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">取消参加</h3>
                    </div>
                    <div class="modal-body">
                        <div role="form">
                            <div>
                                <label class="col-lg-2">你的名称: </label> <input
                                    id="order_lunch_modal_decrease_txt_name"
                                    class="form-control" placeholder="请输入名称" type="text">
                            </div>
                            <br>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button
                                id="order_lunch_modal_decrease_submit"
                                type="button" class="btn btn-primary">确认
                        </button>
                        <button
                                id="order_lunch_modal_decrease_submit_cancel"
                                type="button" class="btn btn-default" data-dismiss="modal">取消
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <table class="table table-bordered">
                <caption>当前点餐详情</caption>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>IP地址</th>
                    <th>参加人名</th>
                    <th>点餐增量</th>
                    <th>提交时间</th>
                </tr>
                </thead>
                <tbody id="order_lunch_info_detail_table_body">
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            refreshOrderDetails();

            $("#order_lunch_btn_refresh").click(function () {
                refreshOrderDetails();
            });

            $("#order_lunch_btn_order_add").click(function () {
                increaseModalDisplay();
            });

            $("#order_lunch_modal_increase_submit_cancel").click(function () {
                increaseModalDisplayNone();
            });

            $("#order_lunch_modal_increase_submit").click(function () {
                var name = $("#order_lunch_modal_increase_txt_name").val();
                executeGetWithJson(
                    BASE_URL + "order/increase?name=" + name,
                    function (data) {
                        if (data && data === true) {
                            increaseModalDisplayNone();
                            refreshOrderDetails();
                        } else {
                            alert("Request failed.")
                        }
                    },
                    function (data, status) {
                        alert(status);
                    }
                );
            });

            $("#order_lunch_btn_order_remove").click(function () {
                decreaseModalDisplay();
            });

            $("#order_lunch_modal_decrease_submit_cancel").click(function () {
                decreaseModalDisplayNone();
            });

            $("#order_lunch_modal_decrease_submit").click(function () {
                var name = $("#order_lunch_modal_decrease_txt_name").val();
                executeGetWithJson(
                    BASE_URL + "order/decrease?name=" + name,
                    function (data) {
                        if (data && data === true) {
                            decreaseModalDisplayNone();
                            refreshOrderDetails();
                        } else {
                            alert("Request failed.")
                        }
                    },
                    function (data, status) {
                        alert(status);
                    }
                );
            });

            $("#order_lunch_btn_clear").click(function () {
                executeGetWithJson(
                    BASE_URL + "order/clear",
                    function (data) {
                        if (data && data === true) {
                            refreshOrderDetails();
                        } else {
                            alert("Request failed.")
                        }
                    },
                    function (data, status) {
                        alert(status);
                    }
                );
            });
        });

        function refreshOrderDetails() {
            $("#order_lunch_info_detail_table_body").empty();
            $("#order_lunch_info_sum").text("当前点餐人数: 0");
            executeGetWithJson(
                BASE_URL + "order/details",
                function (data) {
                    if (data) {
                        var sum = data.sum;
                        $("#order_lunch_info_sum").text("当前点餐人数: " + sum);
                        var orders = data.orders;
                        if (orders && orders.length > 0) {
                            for (var i = 0; i < orders.length; i++) {
                                var order = orders[i];
                                var name;
                                if (order.name && order.name !== "") {
                                    name = order.name;
                                } else {
                                    name = "无名大侠";
                                }
                                $("#order_lunch_info_detail_table_body").append(
                                    "<tr>\n" +
                                    "<td>" + order.number + "</td>\n" +
                                    "<td>" + order.ipAddress + "</td>\n" +
                                    "<td>" + name + "</td>\n" +
                                    "<td>" + order.appendNum + "</td>\n" +
                                    "<td>" + formatDateTime(order.orderTime) + "</td>\n" +
                                    "</tr>"
                                );
                            }
                        }
                    }
                },
                function (data, status) {
                    alert(status);
                }
            );
        }

        function increaseModalDisplay() {
            $("#order_lunch_modal_increase").attr("class", "modal fade in");
            $("#order_lunch_modal_increase").attr("style", "display: block");
        }

        function increaseModalDisplayNone() {
            $("#order_lunch_modal_increase").attr("class", "modal fade");
            $("#order_lunch_modal_increase").attr("style", "display: none");
        }

        function decreaseModalDisplay() {
            $("#order_lunch_modal_decrease").attr("class", "modal fade in");
            $("#order_lunch_modal_decrease").attr("style", "display: block");
        }

        function decreaseModalDisplayNone() {
            $("#order_lunch_modal_decrease").attr("class", "modal fade");
            $("#order_lunch_modal_decrease").attr("style", "display: none");
        }
    </script>
</div>
</body>
</html>